<!-- 创作者审核审核 -->
<template>
  <div class="userpage">
    <div class="list-box" id="list-box">
      <el-table
        ref="usersTable"
        :data="listData"
        v-loading="loading"
        :height="height"
        style="width: 100%"
        header-row-class-name="headcss"
      >
        <el-table-column prop="Head" label="头像" align="center" width="150">
          <template slot-scope="scope">
            <div>
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.Head"
                :preview-src-list="[scope.row.Head]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="InfoPath"
          label="资料"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div style="max-height: 200px; overflow: auto;">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.infoStr"
                placement="top"
              >
                <p class="line1">{{ scope.row.infoStr }}</p>
              </el-tooltip>
              <el-image
                v-for="(item,index) in scope.row.InfoPath"
                style="width: 100px; height: 100px"
                :key="index"
                :src="item"
                :preview-src-list="[item]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Profile" label="联系方式" align="center" width="150">
          <template slot-scope="scope">
            <div>
              <p class="line2">({{scope.row.Type}})</p>
              <p class="line2">{{ scope.row.ContratInfo}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="CreateTime"
          label="注册时间"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="Creator"
          label="地址"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Level"
          label="等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Name"
          label="名称"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column prop="Profile" label="个人简介" align="center" width="150">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.Profile"
              placement="top"
            >
              <p class="line2">{{ scope.row.Profile }}</p>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="256">
          <template slot-scope="scope">
            <el-button
              @click="handleOpenUserDetail(scope.row)"
              type="text"
              size="medium"
            >
              查看鞋友
            </el-button>
            <el-button
              @click="handelCheckCreator(1, scope.row)"
              type="text"
              size="medium"
            >
              通过
            </el-button>
            <el-button
              @click="handleOpenDialog(scope.row)"
              type="text"
              size="medium"
            >
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-limit">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>

    <el-dialog title="驳回原因" :visible.sync="dialogVisible" width="30%">
      <div class="center">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="info"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelCheckCreator(-1, selectedItem)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="查看鞋友" :visible.sync="dialogVisible2" width="30%">
      <div class="">
        <div class="row_item">有效鞋友： {{ selectedUserDetail.People }}</div>
        <div class="row_item">社区人数： {{ selectedUserDetail.TeamNum }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCreatAuditList, setProcess,getUsersBase } from "@/utils/api";
export default {
  data() {
    return {
      currentPage: 1,
      size: 15,
      total: 0,
      height: "100%",
      loading: false,
      listData: [],
      type: 1,
      content: "",
      dialogVisible: false,
      selectedItem: {},
      options: [
        { label: "审核通过", value: 1001 },
        { label: "审核失败", value: 1002 },
      ],
      Addr: "",
      IsCheck: "",
      Email: "",
      info: "",
      dialogVisible2: false,
      selectedUserDetail:{}
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 基础查询
    async fetchData(datas) {
      let params = {
        Size: this.size,
        Limit: this.currentPage - 1,
      };
      this.loading = true;
      const res = await getCreatAuditList(params);
      this.loading = false;
      console.log(res.data);
      const url = "https://admin.jogger.cc/#/";
      // const url = "http://45.249.247.134:8086";
      this.listData = res.data.map((item) => {
        const path = item.InfoPath ? item.InfoPath.split("+") : '';
        console.log(path)
        const infoStr = path ? path[0] : '';
        const infoPath = path ? path[1].split(";").filter(item => item).map(item => url+item) : '';
        console.log(infoPath)

        return {
          ...item,
          InfoPath: infoPath,
          Head: url + item.Head,
          infoStr: infoStr,
        };
      });
    },
    SizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      this.fetchData();
    },
    CurrentChange(page) {
      console.log(this.listData);
      this.currentPage = page;
      this.fetchData();
    },
    handleOpenDialog(row) {
      this.dialogVisible = true;
      this.selectedItem = row;
    },
    async handleOpenUserDetail(row) { 
      console.log(row)
      let params = {
        option: 'userbase-addr',
        addr: row.Creator,
        size: 15,
        page: 0,
      };
      let { data } = await getUsersBase(params);
      console.log(data.dataList[0])
      this.selectedUserDetail = data.dataList[0];

      this.dialogVisible2 = true;
    },

    async handelCheckCreator(state, item) {
      let params = {
        state: state,
        addr: item.Creator,
      };
      if (state == -1) {
        params.info = this.info;
      }
      const res = await setProcess(params);
      if (res.response.msg === "Ok") {
        state == 1
          ? this.$message({ type: "success", message: "审核通过!" })
          : this.$message({ type: "success", message: "驳回成功!" });
        this.dialogVisible = false;
        this.fetchData();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.userpage {
  padding: 20px 20px 10px 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video {
  height: 400px;
}
.list-box {
  flex: 1;
  overflow-y: scroll;
}
.page-limit {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
.stsr {
  color: #2389fe;
  font-weight: bolder;
  margin: 0 4px;
  font-size: 16px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search {
  display: flex;
  align-items: center;
  width: 320px;
  justify-content: space-between;
  width: 100%;

  input {
    width: 200px;
  }

  button {
    width: 90px;
    height: 40px;
    background: #2389fe;
    border-radius: 5px;
    color: #fff;
    margin-left: 10px;
    &:active {
      opacity: 0.8;
    }
  }
}
.user-do {
  display: flex;
  align-items: center;
  .btn1 {
    width: 70px;
    height: 40px;
    background: rgba(211, 12, 63, 0.99);
    border-radius: 5px;
    color: #fff;
    &:active {
      opacity: 0.8;
    }
  }
  .btn2 {
    width: 70px;
    height: 40px;
    background: #2389fe;
    border-radius: 5px;
    color: #fff;
    margin: 0 10px;
    &:active {
      opacity: 0.8;
    }
  }
  .btn3 {
    width: 171px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #2389fe;
    color: #2389fe;
    background: #fff;
    &:active {
      border: 1px solid #15549d;
      color: #15549d;
    }
  }
}
.line1 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.line2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.page-title {
  display: flex;
  align-items: center;
  padding-bottom: 20px;

  p {
    margin-left: 10px;
    font-size: 24px;
    color: #333333;
  }

  img {
    width: 24px;
  }
}
</style>
<style>
.el-table {
  border-radius: 5px;
}
.el-table th.el-table__cell {
  background-color: #2389fd !important;
  color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #deeeff !important;
}
.el-table td.el-table__cell {
  border: none;
}
.inp .el-input__inner {
  border: none;
  padding-left: 0;
}
.row_item{
  height: 50px;
  font-size: 16px;
  margin-top: 10px;
}
</style>
